<template>
  <div id="wallet">
    <top-bar :title="title"></top-bar>
    <div class="details">
      <md-scroll-view ref="scrollView" :scrolling-x="false" :auto-reflow="true" @refreshing="onRefresh" @endReached="onEndReached">
        <md-scroll-view-refresh
          slot="refresh"
          slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
          :scroll-top="scrollTop"
          :is-refreshing="isRefreshing"
          :is-refresh-active="isRefreshActive"
        ></md-scroll-view-refresh>
        <ul class="details_list">
          <li v-show="items.length > 0" v-for="(item,index) in items" :key="index">
            <div class="date-label" v-show="isSametoBefore(index)">{{item.label}}</div>
            <div class="each-item" v-if="item.consumeType==0">
              <p class="type_name">账户充值</p>
              <p class="time">{{changeTime(item.consumeTime)}}</p>
              <p class="amtMoney">+{{desJM(item.amtMoney)}}</p>
            </div>
            <div class="each-item" v-else-if="item.consumeType==1">
              <p class="type_name">
                {{item.orderType}}
                <i class="adress">{{getRoute(item.fromTo)}}</i>
              </p>
              <p class="time">{{changeTime(item.consumeTime)}}</p>
              <p class="amtMoney">-{{desJM(item.amtMoney)}}</p>
            </div>
            <div class="each-item" v-else-if="item.consumeType==2">
              <p class="type_name">
                退款
                <i class="adress">{{getRoute(item.fromTo)}}</i>
              </p>
              <p class="time">{{changeTime(item.consumeTime)}}</p>
              <p class="amtMoney">+{{desJM(item.amtMoney)}}</p>
            </div>
            <div class="each-item" v-else-if="item.consumeType==3">
              <p class="type_name">系统赠送</p>
              <p class="time">{{changeTime(item.consumeTime)}}</p>
              <p class="amtMoney">+{{desJM(item.amtMoney)}}</p>
            </div>
            <div class="each-item" v-else-if="item.consumeType==4">
              <p class="type_name">
                退款
                <i class="adress">{{getRoute(item.fromTo)}}</i>
              </p>
              <p class="time">{{changeTime(item.consumeTime)}}</p>
              <p class="amtMoney">-{{desJM(item.amtMoney)}}</p>
            </div>
          </li>
        </ul>
        <md-scroll-view-more slot="more" :is-finished="isFinished"></md-scroll-view-more>
      </md-scroll-view>
    </div>
  </div>
</template>
<script>
import { Tabs, Icon, Field, InputItem, Toast, Dialog, ScrollView, ScrollViewRefresh, ScrollViewMore } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '账户明细',
      items: [],
      itemIndex: 16,
      pageNo: 1,
      pageToNo: '',
      isFinished: false
    };
  },
  created() {
    this.getMyAccountList(this.pageNo);
  },
  methods: {
    getMyAccountList(pageNo) {
      let params = {
        pageNo: pageNo,
        pageSize: 15
      };
      Loading.show();
      http.post('recharge/getMyAccountDetail', params).then(res => {
        Loading.hide();
        this.$refs.scrollView.finishRefresh();
        this.$refs.scrollView.finishLoadMore();
        if (res.data.rows) {
          if (res.data.rows.length === 0) {
            this.isFinished = true;
            return false;
          }
        }
        if (res.data.code === '000000') {
          console.log(res.data);
          this.items = res.data.data.rows;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    isSametoBefore(index) {
      if (index !== 0) {
        return !(this.items[index].label === this.items[index - 1].label);
      }
      return true;
    },
    // des解密
    desJM(value) {
      return decryptByDESModeEBC(value);
    },
    // 字符串截取
    getRoute(text) {
      if (text.length > 15) {
        return text.substring(0, 15) + '...';
      } else {
        return text;
      }
    },
    // 时间戳转化为时间
    changeTime(timestamp) {
      var date = new Date(timestamp); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      var h = date.getHours() + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    onRefresh() {
      this.items = [];
      this.pageNo = 1;
      this.isFinished = false;
      this.getMyAccountList(this.pageNo);
    },
    onEndReached() {
      if (!this.isFinished) {
        this.pageNo += 1;
        let params = {
          pageNo: this.pageNo,
          pageSize: 15
        };
        Loading.show();
        http.post('recharge/getMyAccountDetail', params).then(res => {
          Loading.hide();
          this.$refs.scrollView.finishLoadMore();
          this.$refs.scrollView.reflowScroller();
          console.log(res.data);
          if (res.data.data.rows.length === 0) {
            this.isFinished = true;
            return false;
          }
          if (res.data.code === '000000') {
            let newPage = res.data.data.rows;
            this.items = this.items.concat(newPage);
          } else {
            Dialog.alert({
              title: '提示',
              content: res.data.msg,
              confirmText: '确定'
            });
          }
        });
      } else {
        this.$refs.scrollView.finishLoadMore();
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

#wallet {
  height: 100vh;
  background-color: color-primary-background;
}

i {
  font-style: normal;
}

.wallet {
  margin-top: 20px;
}

.details {
  height: calc(100vh - 88px);
}

.date-label {
  height: 78px;
  line-height: 78px;
  font-size: 26px;
  color: #666;
  padding-left: 30px;
  background-color: color-primary-background;
}

.each-item {
  height: 110px;
  border-bottom: solid 1px #e0e0e0;
  padding: 0px 30px;
  position: relative;
  background-color: #fff;
}

.type_name {
  font-size: 28px;
  color: #333;
  padding-top: 20px;
}

.type_name i {
  margin-left: 5px;
}

.time {
  font-size: 24px;
  color: #666;
  margin-top: 10px;
}

.amtMoney {
  position: absolute;
  top: 45px;
  font-size: 28px;
  color: #333;
  right: 30px;
}

.allAccount {
  text-align: center;
  font-size: 26px;
  color: #999;
  margin-top: 20px;
}
</style>
